package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Text
import androidx.compose.material3.rememberModalBottomSheetState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.tooling.preview.Preview
import com.csw.compose.App
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.module.BasePage
import kotlinx.coroutines.launch

@Preview
@Composable
fun BottomSheetPagePreview() {
    BasePage({}, "底部抽屉（ModalBottomSheet）") {
        BottomSheetPage()
    }
}

class BottomSheetPageData {
    companion object : Destination("BottomSheetPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/bottom-sheets?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BottomSheetPage() {
    Column {
        PrimaryTitle("简介")
        BodyText("底部抽屉弹窗，与BottomSheetDialog一致，支持下拉手势关闭对话框")
        NormalSpacer()

        val sheetState = rememberModalBottomSheetState()
        val scope = rememberCoroutineScope()
        val showing = remember { mutableStateOf(false) }
        FloatingActionButton({ showing.value = true }) {
            Text("show bottom sheet dialog")
        }
        if (showing.value) {
            ModalBottomSheet(
                {
                    App.SHOW_APP_TOAST("关闭底部弹窗")
                    showing.value = false
                },
                sheetState = sheetState
            ) {
                Button({
                    scope.launch {
                        sheetState.hide()
                    }.invokeOnCompletion {
                        //关闭对话框是一个动画，在动画完成之后，移除组件
                        if (!sheetState.isVisible) {
                            showing.value = false
                        }
                    }
                }) {
                    Text("Dismiss")
                }
                for (i in 0..10) {
                    Text("item$i")
                }
            }
        }

    }


}